<template>
  <div class="hotBlog">
<!--    <img src="/static/imgs/2.jpg" height="100%">-->
    <img :src="imgsrc" height="100%">
    <div class="blogTitle">
      <el-link :underline="false">
        <h3 style="margin-top: -2px;">{{hotBlogItem.title}}</h3>
      </el-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "myIndexHotBlog",
  props: {
    hotBlogItem: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    imgsrc: function () {
      return "/static/imgs/" + this.hotBlogItem.img;
    }
  },
}
</script>

<style scoped>
.hotBlog{
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  width: 100%;
  height: 60px;
  margin-top: 10px;
}
.blogTitle{
  height: 100%;
  margin-left: 10px;
  margin-right: 10px;
}
</style>